<template>
		<div class="row" >
		<div class="col-xs-12">
		<div id="role-scheduling-tab">
			<el-button :plain="true" type="danger"  class="againBut" @click="againBut">重新排课</el-button>
				<span class="lookError" @click="lookError">点击查看规则冲突列表</span>
			<div class="role-tab noBorderBottom">
				<ul>
					<li class="no-before room-tab">
						<i class="icon-step3-std-yes dh"></i><i class="icon-step3-std-no"></i><router-link  :to="{ path: '/automatic/Student' }" >学生课表</router-link>
					</li>
					<li class="">
						<i class="icon-step3-teacher-yes"></i><i class="icon-step3-teacher-no"></i><router-link :to="{ path: '/automatic/Teacher' }" >教师课表</router-link>
					</li>
					<li  class="student-tab active">
						<i class="icon-step3-class-yes"></i><i class="icon-step3-class-no"></i><router-link :to="{ path: '/automatic/Classroom' }">教室课表</router-link>
					</li>
					<li class="">
						<i class="icon-step3-all-yes"></i><i class="icon-step3-all-no"></i><router-link   :to="{ path: '/automatic/MasterTimetable' }" >总课表</router-link>
					</li>
				</ul>
			</div>
		</div>
		<el-select v-model="ClassroomId" placeholder="请选择教室" class="selectClass" @change="changeRoom">
			<el-option v-for="item in getClassroomList" :key="item.roomId" :label="item.roomName" :value="item.roomId">
			</el-option>
		</el-select>

		<div class="col-xs-24 selectClass overflow">
			<div class="describe_title">
				调课说明：
			</div>
			<div class="describe_colorBox green"></div>
			<div class="describe_text">
				可调空闲区域
			</div>
			<div class="describe_colorBox yellow"></div>
			<div class="describe_text">
				与预设规则冲突
			</div>
			<div class="describe_colorBox orange"></div>
			<div class="describe_text">
				该区域已经设置不排课
			</div>
		</div>

		<div class="col-xs-24 selectClass overflow">
			<div class="describe_title2">
				温馨提示：
			</div>
			<div class="describe_textBox">
				<div class="describe_item">
					<div class="describe_colorBox2 green"></div>
					<div class="describe_colorBox2 yellow"></div>
					<div class="describe_colorBox2 orange"></div>
					<div class="describe_text2">
						三种颜色下都可以调整课表，白色区域不可以调整课表区域。
					</div>
				</div>
				<div class="describe_item">
					<div class="describe_colorBox2 yellow"></div>
					<div class="describe_text2">
						与预设的合班规则、不连堂规则、教室平齐规则、周任课/日任课规则、连上规则有冲突
					</div>
				</div>
				<div class="describe_item noMB10">
					<div class="describe_colorBox2 orange"></div>
					<div class="describe_text2">
						与预设的不排课规则冲突、包括年级不排课、班级不排课、课程不排课、老师不排课
					</div>
				</div>
			</div>
		</div>

		<div class="block textAndBtn">
			<span class="demonstration">教室课程表</span>
			<span class="wrapper export">
				    <el-button type="primary" icon="upload2" @click="exportTable">导出所有教室课表</el-button>
				  </span>
			<div class="clear"></div>
		</div>
		<el-table :data="getCourseList" v-loading="loading" :element-loading-text="loadingText" @cell-click="getCellClick" border style="width: 100%">
			<el-table-column prop="num" label="节次" align="center">
				<template slot-scope="scope">
						<div class="cell_white">
								{{ scope.row.num}}
						</div>
				</template>
			</el-table-column>
			<el-table-column prop="Monday" label="星期一" align="center">
				<template slot-scope="scope">
						<div :color="scope.row.Monday.color" :class="scope.row.Monday.color" :posX="scope.row.Monday.posX" :posY="scope.row.Monday.posY">
								{{ scope.row.Monday.name}}
						</div>
				</template>
			</el-table-column>
			<el-table-column prop="Tuesday" label="星期二" align="center">
				<template slot-scope="scope">
						<div :color="scope.row.Tuesday.color" :class="scope.row.Tuesday.color" :posX="scope.row.Tuesday.posX" :posY="scope.row.Tuesday.posY">
								{{ scope.row.Tuesday.name}}
						</div>
				</template>
			</el-table-column>
			<el-table-column prop="Wednesday" label="星期三" align="center">
				<template slot-scope="scope">
						<div :color="scope.row.Wednesday.color" :class="scope.row.Wednesday.color" :posX="scope.row.Wednesday.posX" :posY="scope.row.Wednesday.posY">
								{{ scope.row.Wednesday.name}}
						</div>
				</template>
			</el-table-column>
			<el-table-column prop="Thursday" label="星期四" align="center">
				<template slot-scope="scope">
						<div :color="scope.row.Thursday.color" :class="scope.row.Thursday.color" :posX="scope.row.Thursday.posX" :posY="scope.row.Thursday.posY">
								{{ scope.row.Thursday.name}}
						</div>
				</template>
			</el-table-column>
			<el-table-column prop="Friday" label="星期五" align="center">
				<template slot-scope="scope">
						<div :color="scope.row.Friday.color" :class="scope.row.Friday.color" :posX="scope.row.Friday.posX" :posY="scope.row.Friday.posY">
								{{ scope.row.Friday.name}}
						</div>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="规则冲突列表" :visible.sync="dialogTableVisible" class="dialogError" v-loading="loadingError" element-loading-text="拼命加载中" style="width: 100%;">
			<el-col :span="24">
					<div class="grid-content bg-purple">
						<div v-for="o in errorList" :key="o" class="text item">{{o}}</div>
					</div>
			</el-col>
		</el-dialog>
	</div>
	</div>
</template>

<script>
//	/schedule/{type}/course/result.do
	import utils from '@/assets/js/urlConfig.js'
	export default {
		data() {
			return {
				getClassroomList: [],
				ClassroomId:"",
				getCourseList: [],
				getCourseList2: [],
				type:"room",
				taskId:"",
				tnId:"",
				classType:"",
				colorList:[],
				nameList:[],
				source:"",
				target:"",
				loadingText:"拼命加载中",
				loading:true,
				sectionNum:0,
				dialogTableVisible:false,
				errorList:[],
				loadingError:false,
			}
		},
		mounted() {
			this.getSessionData();
			this.getRoomListData();
		},
		methods: {
			getSessionData(){
				this.taskId = sessionStorage.getItem('taskId');
				this.tnId = sessionStorage.getItem('tnId');
				this.classType = sessionStorage.getItem('classType');
			},
			getRoomListData() {
			 this.$http.get(utils.UrlConfig.queryRoom+"&taskId="+this.taskId+"&tnId="+this.tnId)
			   .then(res => {
			     res = res.data
			     if (res.rtnCode === "0000000") {
			     	if(res.bizData.length != 0){
			         this.getClassroomList = res.bizData;
			         this.ClassroomId = this.getClassroomList[0].roomId;
			     	}else{
			     		this.loading=false;
			     	}
			     } else {
			         this.$message.error(res.msg);
			     }
			 }).catch(error => {
			     console.log(error)
			 })
			},
			getResult(type,taskId,tnId,ClassroomId){
			 let getCourseList = [];
			 this.loading = true;
			 this.$http.get(utils.UrlConfig.getResultByRoom+"&taskId="+taskId+"&tnId="+tnId+"&param={roomId:"+ClassroomId+"}")
			   .then(res => {
			     res = res.data
			     if (res.rtnCode === "0000000") {
						 this.nameList = res.bizData.result.week;
						 this.sectionNum = res.bizData.result.week[0].length;
							for(var i = 0 ; i < res.bizData.result.week[0].length; i++){
								var json = {};
								json.num = "第"+(i+1)+"节";
								for(var k = 0 ; k < res.bizData.result.week.length ; k++){
									if(k == 0){
										json.Monday = {
											"name": res.bizData.result.week[k][i],
											"color":"cell_white",
											"posX": k,
											"posY": i,
										};
									}else if(k == 1){
										json.Tuesday = {
											"name": res.bizData.result.week[k][i],
											"color":"cell_white",
											"posX": k,
											"posY": i,
										};
									}else if(k == 2){
										json.Wednesday = {
											"name": res.bizData.result.week[k][i],
											"color":"cell_white",
											"posX": k,
											"posY": i,
										};
									}else if(k == 3){
										json.Thursday = {
											"name": res.bizData.result.week[k][i],
											"color":"cell_white",
											"posX": k,
											"posY": i,
										};
									}else if(k == 4){
										json.Friday = {
											"name": res.bizData.result.week[k][i],
											"color":"cell_white",
											"posX": k,
											"posY": i,
										};
									}
								}
								getCourseList.push(json);
							}
							this.getCourseList = getCourseList;
							this.loading = false;
							// console.log(this.getCourseList);
			     } else {
			         this.$message.error(res.msg);
							 this.loading = false;
			     }
			 }).catch(error => {
			     console.log(error)
					 this.loading = false;
			 })
			},
			changeRoom(value){
				this.source = [];
				this.getResult(this.type,this.taskId,this.tnId,this.ClassroomId);
			},
			getCellClick(row, column, cell, event){
				// alert(row[column.property].posX+"==="+row[column.property].posY);
				if(this.source == ""){
					if(row[column.property].name != ""){
						this.source = "["+row[column.property].posX+","+row[column.property].posY+"]";
					}
				}else{
					this.target = "["+row[column.property].posX+","+row[column.property].posY+"]";
					if(this.source == this.target){
						this.getResult(this.type,this.taskId,this.tnId,this.ClassroomId);
						this.source = "";
						this.target = "";
						return;
					}else{
						let color = row[column.property].color;
						if(color == "cell_white"){
							this.$message.error("白色不能调课！");
							// this.getResult(this.type,this.taskId,this.tnId,this.ClassroomId);
							// this.source = "";
							// this.target = "";
						}else{
							this.exchange(this.ClassroomId,this.taskId,this.tnId,this.source,this.target);
						}
						return;
					}
				}

				if(row[column.property].name != ""){
					if(this.classType == "1"){
						this.queryStatusByClassCoord(this.ClassroomId,this.taskId,this.tnId,row[column.property].posX,row[column.property].posY);
						// this.colorScheduleResult();
						// this.scheduleTaskSuccess();
					}else{
						this.queryEduStatusByClassCoord(this.ClassroomId,this.taskId,this.tnId,row[column.property].posX,row[column.property].posY);
					}
				}
			},
			//行政班调课
			queryStatusByClassCoord(Id,taskId,tnId,posX,posY){
			 this.loadingText = "正在积极准备可调区域，请耐心等待！";
			 this.loading = true;
			 this.$http.post(utils.UrlConfig.queryStatusByClassCoord+"&taskId="+taskId+"&id="+Id+"&tnId="+tnId+"&coord=["+posX+","+posY+"]")
			   .then(res => {
			     res = res.data
			     if (res.rtnCode == '0000000' && res.bizData == true) {
						   this.colorScheduleResult();
			     } else {
						 	 this.source = [];
			         this.$message.error(res.msg);
							 this.loading = false;
			     }
			 }).catch(error => {
			     console.log(error)
					 this.loading = false;
					 this.source = [];
			 })
			},
			//教学班调课
			queryEduStatusByClassCoord(Id,taskId,tnId,posX,posY){
			 this.loading = true;
			 this.$http.post(utils.UrlConfig.queryEduStatusByClassCoord+"&taskId="+taskId+"&id="+Id+"&tnId="+tnId+"&coord=["+posX+","+posY+"]"+"&target=[0,0]")
			   .then(res => {
			     res = res.data
			     if (res.rtnCode == '0000000' && res.bizData == true) {
						   this.colorScheduleResult();
			     } else {
			         this.$message.error(res.msg);
							 this.loading = false;
							 this.source = [];
			     }
			 }).catch(error => {
			     console.log(error)
					 this.loading = false;
					 this.source = [];
			 })
			},
			colorScheduleResult(){
				this.loading = true;
				this.$http.get(utils.UrlConfig.result+"&taskId="+this.taskId+"&tnId="+this.tnId)
 			   .then(res => {
 			     res = res.data
 			     if (res.rtnCode == '0000000') {
						 var state = res.bizData;
						 switch (state) {
                    case "0":
                        // console.log("调课中");
                        that.items2 = setInterval(function () {
                            this.colorScheduleResult();
                        }, 30000);
                        break;
                    case "1":
                        // console.log("调课成功");
                        this.scheduleTaskSuccess();
                        break;
                    case "-1":
                        // console.log("调课失败(数据异常)");
												// this.getDesc();
												this.$message.error("调课失败！");
												this.loading = false;
												this.source = [];
                        break;
                    case "-2":
                        // console.log("调课失败(系统异常)");
												// this.getDesc();
												this.$message.error("调课失败！");
												this.loading = false;
												this.source = [];
                        break;
                    default:
                        break;

                }
 			     } else {
 			         this.$message.error(res.msg);
							 this.loading = false;
							 this.source = [];
 			     }
 			 }).catch(error => {
 			     console.log(error)
					 this.loading = false;
					 this.source = [];
 			 })
			},
			scheduleTaskSuccess(){
				this.loading = true;
				this.$http.get(utils.UrlConfig.success+"&taskId="+this.taskId+"&tnId="+this.tnId)
				 .then(res => {
					 res = res.data
					 if (res.rtnCode == '0000000') {
						 let tableList = [];
						 let itmeList = [];
						 for(let i=0;i<res.bizData.length;i++){
							 let itme = res.bizData[i];
							 itmeList.push(itme);
							 if((i+1)%this.sectionNum==0){
								 tableList.push(itmeList);
								 itmeList = [];
							 }
						 }
						 this.colorList = tableList;
						 this.getCourseList2 = [];

						 for(var i = 0 ; i < this.nameList[0].length; i++){
							 var json = {};
							 json.num = "第"+(i+1)+"节";
							 for(var k = 0 ; k < this.nameList.length ; k++){
								 var colorValue = '';
                    switch (this.colorList[k][i]) {
                        case "0":
                            colorValue = "cell_white";
                            //0 白色
                            break;
                        case "1":
                            colorValue = "cell_orange";
                            //1红色
                            break;
                        case "2":
                            colorValue = "cell_yellow";
                            //2黄色
                            break;
                        case "3":
                            colorValue = "cell_green";
                            //3绿色
                            break;
                        default:
                            break;
                    }
								 if(k == 0){
									 json.Monday = {
										 "name": this.nameList[k][i],
										 "color":colorValue,
										 "posX": k,
										 "posY": i,
									 };
								 }else if(k == 1){
									 json.Tuesday = {
										 "name": this.nameList[k][i],
										 "color":colorValue,
										 "posX": k,
										 "posY": i,
									 };
								 }else if(k == 2){
									 json.Wednesday = {
										 "name": this.nameList[k][i],
										 "color":colorValue,
										 "posX": k,
										 "posY": i,
									 };
								 }else if(k == 3){
									 json.Thursday = {
										 "name": this.nameList[k][i],
										 "color":colorValue,
										 "posX": k,
										 "posY": i,
									 };
								 }else if(k == 4){
									 json.Friday = {
										 "name": this.nameList[k][i],
										 "color":colorValue,
										 "posX": k,
										 "posY": i,
									 };
								 }
							 }
							 this.getCourseList2.push(json);
						 }
						 this.getCourseList = this.getCourseList2;
						 this.loading = false;
					 } else {
							 this.$message.error(res.msg);
							 this.loading = false;
							 this.source = [];
					 }
			 }).catch(error => {
					 console.log(error)
					 this.loading = false;
					 this.source = [];
			 })
		 },
 			exportTable(){
				window.location.href = utils.UrlConfig.exportRoom+"&taskId="+this.taskId+"&tnId="+this.tnId;
			},
		 exchange(Id,taskId,tnId,source,target){
			 this.loadingText = "正在调课中...";
			 this.loading = true;
			 this.$http.post(utils.UrlConfig.exchangeByClass+"&taskId="+taskId+"&id="+Id+"&tnId="+tnId+"&source="+source+"&target="+target)
			   .then(res => {
			     res = res.data
			     if (res.rtnCode === "0000000") {
						 	 if(res.bizData){
								this.$message({
				          message: '调课成功！',
				          type: 'success'
				        });
								this.source = [];
								this.getResult(this.type,this.taskId,this.tnId,this.ClassroomId);
							}else{
								this.$message.error("调课失败！");
								this.getResult(this.type,this.taskId,this.tnId,this.ClassroomId);
							}
			     } else {
			         this.$message.error(res.msg);
							 this.loading = false;
			     }
			 }).catch(error => {
			     console.log(error)
					 this.loading = false;
			 })
		 },
		 againBut(){
			 sessionStorage.setItem('canAgain', "1");
			 this.$router.push({
				 path: '../automatic/'
			 });
		 },
		 lookError(){
			 this.errorList =[];
			 this.loadingError = true;
			 this.dialogTableVisible = true;
			 this.$http.post(utils.UrlConfig.findRule+"&taskId="+this.taskId+"&tnId="+this.tnId)
				 .then(res => {
					 res = res.data
					 if (res.rtnCode === "0000000") {
						 this.loadingError = false;
						 this.errorList = res.bizData;
					 } else {
							 this.$message.error(res.msg);
					 }
			 }).catch(error => {
					 console.log(error)
			 })
		 },
		 getDesc(){
			 this.$http.post(utils.UrlConfig.getDesc+"&taskId="+this.taskId+"&tnId="+this.tnId)
				 .then(res => {
					 res = res.data
					 if (res.rtnCode === "0000000") {
						 	 this.$message.error(res.bizData[0]);
						//  this.$message({
						// 	 message: res.bizData[0],
						// 	 type: 'success'
						//  });
					 } else {
							 this.$message.error(res.msg);
					 }
			 }).catch(error => {
					 console.log(error)
			 })
		 },

		}

	}
</script>

<style>
	.textAndBtn {
		margin: 20px 0;
	}

	.selectClass {
		margin-top: 25px;
	}

	.demonstration {
		font-weight: bold;
		font-size: 14px;
		line-height: 36px;
	}

	.noBorderBottom {
		border-bottom: none;
	}

	.againBut{
		width: 122px;
		padding: 8px 0;
		margin-bottom: 35px;
	}

	.export {
		float: right;
		width: 15%;
	}

	.clear {
		clear: both;
	}
	.el-table .cell {
		line-height: 40px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.cell_white{
		background-color: #fff;
		height: 40px;
	}
	.cell_green{
		background-color: #33cc99;
		height: 40px;
	}
	.cell_yellow{
		background-color: #ffcc33;
		height: 40px;
	}
	.cell_orange{
		background-color: #ff9966;
		height: 40px;
	}
	.el-table tr:hover{
		background-color: #fff !important;
	}

	#role-scheduling-tab .role-tab ul .active a{
		color: #36c6d3;
	}

	#role-scheduling-tab .role-tab ul li a{
		color: #9B9B9B;
	}

	#role-scheduling-tab .lookError{
		cursor: pointer;
	}

	#role-scheduling-tab .lookError:hover{
				color: #36c6d3;
				text-decoration:underline;
	}

	#role-scheduling-tab .dialogError  .text {
		font-size: 14px;
	}

	#role-scheduling-tab .dialogError .item {
		padding: 14px;
		text-align: left;
	}

	.describe_title{
		float: left;
		font-size: 16px;
		font-weight: bold;
	}
	.describe_title2{
		float: left;
	}
	.describe_colorBox{
		float: left;
		width: 20px;
		height: 20px;
		margin: 3px 10px 0 0;
	}
	.describe_colorBox2{
		float: left;
		width: 20px;
		height: 20px;
		margin: 0px 10px 0 0;
	}
	.green{
		background-color: #33cc99;
	}
	.yellow{
		background-color: #ffcc33;
	}
	.orange{
		background-color: #ff9966;
	}
	.describe_text{
		float: left;
		height: 20px;
		line-height: 20px;
		margin: 3px 40px 0 0;
	}
	.describe_text2{
		float: left;
		height: 20px;
		line-height: 20px;
		margin: 0px 40px 0 0;
	}
	.overflow{
		overflow: hidden;
	}
	.describe_textBox{
		overflow: hidden;
	}
	.describe_item{
		overflow: hidden;
		margin-bottom: 10px;
	}
	.noMB10{
		margin-bottom: 0px;
	}
</style>
